<template>
	<!-- / 轮播图 -->
	<view class="content-all" v-if="rotation != '' && shuffling_style != '2'">
		<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item, index) in rotation" :key="index" @tap="newPostTap(item)">
				<view class="swiper-item">
					<image class="fengrui-img" :src="item.thumbnailurl" mode="" />
					<view class="swiper-hot">
						<text class="swiper-hot-font">Hot</text> {{ item.post_views ? item.post_views: 0  }}°
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="" style="margin: 30rpx 0;" v-if="rotation != '' && shuffling_style == '2'">
		<swiper class="swiper-box-two" @change="change" :autoplay="false" :interval="interval"
			:duration="duration" next-margin="200rpx">
			<swiper-item v-for="(item, index) in rotation" :key="index" @tap="newPostTap(item)">
				<view class="swiper-item-two">
					<view class="swiper-img-two">
						<image class="fengrui-img" :src="item.thumbnailurl" mode="" />
					</view>
					<view class="swiper-title-two">
						{{item.title.rendered}}
					</view>
					<view class="swiper-title-icon-two">
						<image class="fengrui-img" src="/static/index/title-icon.svg" mode="aspectFit" />
					</view>
					<view class="swiper-sld-icon-display">
						<image class="swiper-sld-icon"
							:style="item.content.protected == true ? 'filter: grayscale(0%)':'filter: grayscale(100%)'"
							src="../../static/data/protected.svg" mode=""></image>
						<image class="swiper-sld-icon"
							:style="item.fr_videp_if == '1' ? 'filter: grayscale(0%)':'filter: grayscale(100%)'"
							src="../../static/data/ad_video.svg" mode=""></image>
						<image class="swiper-sld-icon"
							:style="item.fr_down_url != '' ? 'filter: grayscale(0%)':'filter: grayscale(100%)'"
							src="../../static/data/down.svg" mode=""></image>
						<image class="swiper-sld-icon"
							:style="item.pos_read == '1' ? 'filter: grayscale(0%)':'filter: grayscale(100%)'"
							src="../../static/data/renking-1.svg" mode=""></image>
	
						<view class="swiper-time-font">
							阅读：{{ item.post_views ? item.post_views: 0  }}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name:"rotation-swiper",
		data() {
			return {
				// 轮播图
				rotation: [],
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255,1)',
					border: '1px rgba(255, 255, 255,1) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(50, 144, 224, 1)',
					selectedBorder: '1px rgba(50, 144, 224, 1) solid'
				},
			};
		},
		props: {
		  rotation: {
		    type: Array,
		    default: () => []
		  },
		  shuffling_style:1
		},
		
		methods:{
			// 文章列表点击 0正常阅读(默认值)，1跳转公众号，2跳转资源下载，3跳转视频号，4跳转b站
			newPostTap(e) {
				switch (e.pos_read) {
					case '':
						uni.navigateTo({
							url: '../data/data?id=' + e.id
						})
						break;
					case '0':
						uni.navigateTo({
							url: '../data/data?id=' + e.id
						})
						break;
					case '1':
						uni.navigateTo({
							url: '../weblist/weblist?aurl=' + e.account_url
						});
						break;
					case '2':
						uni.navigateTo({
							url: '../download/download?id=' + e.id
						});
						break;
					case '3':
						uni.openChannelsActivity({
							finderUserName: e.wxvideo_id,
							feedId: e.wxvideo_feedid,
							success: (res) => {},
							fail: (err) => {
								// console.log(err)
							}
						})
						break;
					case '4':
						const aid = e.bz_video_av
						const timestamp = new Date().getTime()
						const path =
							`pages/video/video?__preload_=${timestamp*10+3}&__key_=${timestamp*10+4}&avid=${aid}`
						wx.navigateToMiniProgram({
							appId: 'wx7564fd5313d24844',
							path,
							success: res => {
								// console.log('跳转成功')
							}
						})
						break;
					case '5':
						uni.navigateTo({
							url: '../wall/wall?id=' + e.id
						});
						break;
					case '6':
						uni.navigateTo({
							url: '../wall/wall?id=' + e.id
						});
						break;
				}
			},
		}
	}
</script>
<style>
	/* 轮播图 */
	.swiper-hot-font {
		font-size: 24rpx;
		margin-right: 4rpx;
	}
	
	.swiper-hot {
		position: absolute;
		right: 0;
		bottom: 0;
		border-radius: 100rpx 0 24rpx 0;
		padding: 0 30rpx;
		height: 60rpx;
		background: linear-gradient(to right, #ff7d79, #ff8c1e);
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		line-height: 60rpx;
		font-size: 40rpx;
		font-style: italic;
	}
	
	.swiper-item {
		border-radius: 40rpx;
		overflow: hidden;
		height: 380rpx;
		position: relative;
	}
	
	.swiper-box {
		height: 380rpx;
		border-radius: 40rpx;
		overflow: visible;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	
	.swiper-box-two {
		height: 540rpx;
		border-radius: 40rpx;
		overflow: visible;
		margin-bottom: 20rpx;
	}
	
	.swiper-item-two {
		border-radius: 40rpx;
		margin-left: 30rpx;
		overflow: hidden;
		height: 540rpx;
		background-color: #ffffff;
		position: relative;
	}
	
	.swiper-img-two {
		height: 280rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.swiper-title-icon-two {
		height: 40rpx;
		width: 40rpx;
		margin: 0rpx 30rpx 10rpx 30rpx;
	}
	
	.swiper-title-two {
		margin: 30rpx 30rpx 0rpx 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.swiper-sld-icon-display {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		left: 30rpx;
		bottom: 30rpx;
		width: calc(100% - 60rpx);
		position: absolute;
	}
	
	.swiper-sld-icon {
		height: 40rpx;
		width: 40rpx;
		display: block;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	
	.swiper-time-font {
		font-size: 24rpx;
		position: absolute;
		right: 0rpx;
		color: #7c7c7c;
	}
	.fengrui-img{
		width: 100%;
		height: 100%;
	}
</style>